<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>面向对象封装消息提示</title>
    <style>
      .modal {
        width: 300px;
        min-height: 100px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        position: fixed;
        z-index: 999;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        background-color: #fff;
      }

      .modal .header {
        line-height: 40px;
        padding: 0 10px;
        position: relative;
        font-size: 20px;
      }

      .modal .header i {
        font-style: normal;
        color: #999;
        position: absolute;
        right: 15px;
        top: -2px;
        cursor: pointer;
      }

      .modal .body {
        text-align: center;
        padding: 10px;
      }

      .modal .footer {
        display: flex;
        justify-content: flex-end;
        padding: 10px;
      }

      .modal .footer a {
        padding: 3px 8px;
        background: #ccc;
        text-decoration: none;
        color: #fff;
        border-radius: 2px;
        margin-right: 10px;
        font-size: 14px;
      }

      .modal .footer a.submit {
        background-color: #369;
      }
    </style>
  </head>

  <body>
    <button id="delete">删除</button>
    <button id="login">登录</button>

    <!-- <div class="modal">
    <div class="header">温馨提示 <i>x</i></div>
    <div class="body">您没有删除权限操作</div>
  </div> -->

    <script>
      // 获取dom元素
      const delnth = document.querySelector('#delete')
      const lognth = document.querySelector('#login')
      // 封装方法
      function Modal(a, b) {
        // 创建一个div 赋值给this.dom这个key
        this.dom = document.createElement('div')
        // 将创建的元素的内容修改成需要的标签样式，并定义形参
        this.dom.innerHTML = `
        <div class="header">${a} <i>x</i></div>
        <div class="body">${b}</div>`
        // 添加类名
        this.dom.classList.add('modal')
        // 给i添加关闭功能 (使用箭头函数可以将里面的this直接指向调用者)
        this.dom.querySelector('i').addEventListener('click', () => {
          // 调用删除原型方法
          this.revm()
        })
        // 调用添加操作
        this.gg()
      }

      // 给构造函数绑定原型方法 将元素添加到body里
      Modal.prototype.gg = function () {
        // 判断是否已经有弹出
        if (document.querySelector('.modal')) return
        document.querySelector('body').appendChild(this.dom)
      }
      // 给构造函数绑定原型方法 删除
      Modal.prototype.revm = function () {
        this.dom.remove()
      }

      // 绑定事件
      delnth.addEventListener('click', function () {
        // 调用方法 new一个实例化对象
        const div = new Modal('温馨提示', '您没有删除权限操作')
        // 调用添加操作
        // div.gg()
      })
      lognth.addEventListener('click', function () {
        // 调用方法 new一个实例化对象
        const div = new Modal('友情提示', '你还没有注册')
        // 调用添加操作
        // div.gg()
      })
    </script>
  </body>
</html>
